<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2023-03-23 10:19:01
 * @LastEditors: Andy
 * @LastEditTime: 2023-03-27 10:01:58
-->
<template>
  <x-page>
    <x-filter @search="handleSearch" @reset="resetSearch">
      <x-filter-item :label="$t('config.invoiceInformation.invoiceTitle')">
        <el-input v-model="searchParams.header" :placeholder="'请输入'" clearable maxlength="50"></el-input>
      </x-filter-item>
      <x-filter-item :label="$t('config.invoiceInformation.ird')">
        <el-input v-model="searchParams.taxId" :placeholder="'请输入'" clearable maxlength="50"></el-input>
      </x-filter-item>
    </x-filter>
    <x-data>
      <template #tool>
        <el-row type="flex" class="tools" justify="space-between">
          <el-col :span="20">
            <el-button type="primary" :icon="buttonIcons('add')" @click="handleCreate">
              {{ $t('common.add') }}</el-button
            >
            <!-- <el-button type="danger" :icon="buttonIcons('delete')" @click="handleBatchDelete">
              {{ $t('common.batchDelete') }}</el-button
            > -->
          </el-col>
          <el-col :span="4" class="tools-config">
            <x-column-config :columns="columns" @updateColumns="updateColumns" @on-refresh="loadData" />
          </el-col>
        </el-row>
      </template>
      <x-table
        ref="tableCom"
        :pagination="pagination"
        :data-source="tableData"
        :loading="loading"
        :row-key="'id'"
        @on-change="handleTableChange"
        @on-selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column :label="$t('common.serialNumber')" :width="55" fixed type="index" />
        <el-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.prop"
          :fixed="item.fixed"
          :show-overflow-tooltip="true"
          :width="item.width"
          :min-width="item.minWidth || '-'"
          :label="item.label"
          :sortable="'custom'"
        >
          <template #default="scope">
            <span v-if="item.prop === 'state'"></span>
            <span v-else>
              {{ scope.row[item.prop] | emptyVal }}
            </span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" :label="$t('common.opeartion')" :align="'center'" width="160">
          <template #default="scope">
            <more-table-actions
              :action-list="actions"
              :permis-list="permissionsActions"
              :row="scope.row"
              @onActionClick="handleActions"
            />
          </template>
        </el-table-column>
      </x-table>
    </x-data>
    <invocie-information-dialog ref="invocieInformationCom" :dict-options="dictOptions" @handleSuccess="loadData()" />
  </x-page>
</template>
<script>
  import { buttonIcons, PermissionsMixin, QueryDictMixin, TableListMixin, selectDictLabel } from '@package/utils'
  import { columns, actions } from '../config/invoiceInformationConfig.js'
  import { listUrl, apiDeleteInvoiceDict } from '../api/invoiceInformation.js'
  import InvocieInformationDialog from '../components/invocieInformationDialog.vue'
  import { EnumApiCode } from '../../../../../../globalEnum.js'

  export default {
    name: 'InvoiceInformationMaintenance',
    components: { InvocieInformationDialog },
    mixins: [TableListMixin, QueryDictMixin, PermissionsMixin],
    data() {
      return {
        listUrl,
        columns,
        actions,
        searchParams: {
          header: '',
          number: ''
        }
      }
    },
    methods: {
      selectDictLabel,
      buttonIcons,
      handleCreate() {
        this.$refs.invocieInformationCom.handleOpen()
      },
      handleBatchDelete() {
        if (!this.selectionRows.length) {
          this.$message.warning('请选择删除的用户')
          return
        }
        const ids = this.selectionRows.map((v) => v.id)
        this.handleDeleteInfo(ids)
      },
      handleActions({ key, data }) {
        switch (key) {
          case 'edit':
            this.$refs.invocieInformationCom.handleOpen(data)
            break
          case 'delete':
            this.handleDeleteInfo(data.id)
            break
        }
      },
      handleDeleteInfo(id) {
        this.$confirm(this.$t('config.invoiceInformation.confirmDelete'), this.$t('common.tip'), {
          confirmButtonText: this.$t('common.sure'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }).then(async () => {
          const { code } = await apiDeleteInvoiceDict(id)
          if (code === EnumApiCode.Success) {
            this.$message.success(this.$t('common.deleteSuccess'))
            this.loadData()
          }
        })
      }
    }
  }
</script>
